<template>
  <van-tabbar v-model="tabIndex" route>
    <!-- 动态设置index，当当前这个路由的index的值 和tabIndex 相等时
    表示在当前这个index的页面  所以给这个index的路由tabbar加上一个class名 ，让他高亮
    :class="{ 'van-tabbar-item--active' : tabIndex === index}"
    -->
    <van-tabbar-item
      v-for="(tabbar, index) in tabbars"
      :key="tabbar.name"
      :to="tabbar.path"
      :icon="tabbar.meta.icon"
      :class="{ 'van-tabbar-item--active' : tabIndex === index}"
    >
      {{ tabbar.meta.title }}
      <span class="count" v-if="tabbar.name === 'Cart'">{{ totalCount | over99}}</span>
     </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import routes from '@/router/routes'
import { mapGetters } from 'vuex'
export default {
  name: 'VueFooter',
  data () {
    return {
      tabIndex: 0
    }
  },
  computed: {
    tabbars () {
      return routes.filter(tabbar => tabbar.meta.isTabbar)
    },
    ...mapGetters(['totalCount'])
  },
  created () {
    // console.log(this.$route)
    // 在routes 里面meta加一个id = 1也可以
    // this.tabIndex = this.$route.meta.id
    this.tabbars.forEach((tab, index) => {
      if (tab.path === '/' + this.$route.path.split('/')[1]) {
        this.tabIndex = index
      }
    })
  }
}
</script>

<style>
.van-tabbar-item__text {
  position: relative;
}
.count {
  position: absolute;
  left: 24px;
  bottom: 30px;
  padding: 1px 4px;
  border-radius: 10px;
  background: red;
  color: white;
}
</style>
